<template>
  <div class="container">
    <el-dialog
      class="dialog"
      :title="dialog.dialogType === 'edit' ? '修改银行账户' : '创建银行账户'"
      :visible.sync="dialog.centerDialogVisible"
      center
      width="500px"
      :lock-scroll="true"
      :before-close="hideDialog"
      @open="getData"
      @close="hideDialog"
    >
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="120px"
        style="margin: 10px; width: auto"
        label-position="left"
      >
        <el-form-item label="银行名称：">
          <el-select
            clearable
            v-model="bank_id"
            :multiple="false"
            filterable
            remote
            reserve-keyword
            placeholder="请输入银行"
            :remote-method="remoteMethods"
            :loading="main_bank.loading"
            @change="getBank(bank_id)"
          >
            <el-option
              v-for="item in main_bank.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户行：" prop="open_bank">
          <el-input
            style="width: 200px"
            v-model="formData.open_bank"
            placeholder="请输入开户行名称"
          />
        </el-form-item>
        <el-form-item label="银行卡号：" prop="account">
          <el-input
            style="width: 200px"
            v-model="formData.account"
            placeholder="请输入银行卡号名称"
          />
        </el-form-item>
        <el-form-item label="户名：" prop="account_name">
          <el-input
            style="width: 200px"
            v-model="formData.account_name"
            placeholder="请输入户名"
          />
        </el-form-item>
        <el-form-item label="区域：" prop="area_name">
          <el-input
            style="width: 200px"
            v-model="formData.area_name"
            placeholder="请输入区域"
          />
        </el-form-item>
        <el-form-item v-if="!dialog.dialogType" label="支付方式：">
          <el-switch
           :disabled="isOnline"
            v-model="formData.way"
            active-text="线上"
            inactive-text="线下"
            @change="statusBtn(formData.way)"
          ></el-switch>
        </el-form-item>
        <el-form-item
          v-if="show && !dialog.dialogType && !isOnline"
          label="银行："
        >
          <el-radio-group v-model="formData.online">
            <template v-for="item in onlineCenter">
              <el-radio :label="item.mark">{{ item.name }}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="show && !dialog.dialogTypee && !isOnline"
          label="所属省份："
        >
          <el-select
            clearable
            v-model="site_id"
            :multiple="false"
            filterable
            remote
            reserve-keyword
            placeholder="请输入省份"
            :remote-method="remoteSiteMethods"
            :loading="main_site.loading"
            @change="getSite(site_id)"
          >
            <el-option
              v-for="item in main_site.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectBank } from "@/api/supplier/supplierList";
import {
  addBankInfo,
  editBankInfo,
  onlinelist,
  selectBankProvince,
} from "@/api/settlement/bankList";

export default {
  props: {
    dialog: Object,
    formData: Object,
  },
  data() {
    return {
      bank_id: "",
      bankList: [],
      onlineCenter: [],
      isOnline: true,
      show: false,
      main_bank: {
        options: [],
        value: "",
        list: [],
        loading: false,
      },
      site_id: "",
      siteList: [],
      main_site: {
        options: [],
        value: "",
        list: [],
        loading: false,
      },
      rules: {
        bank_name: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
        ],
        open_bank: [
          { required: true, message: "请输入开户行名称", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入银行卡号名称", trigger: "blur" },
        ],
        account_name: [
          { required: true, message: "请输入户名", trigger: "blur" },
        ],
        area_name: [{ required: true, message: "请输入区域", trigger: "blur" }],
      },
    };
  },
  created() {},
  methods: {
    getData() {
      if (this.dialog.dialogType === "edit") {
        this.bank_id = this.formData.bank_name
      }
      this.main_bankList();
      this.main_siteList();
    },
    //关闭dialog
    hideDialog() {
      this.show = false;
      this.main_bank = {
        options: [],
        value: "",
        list: [],
        loading: false,
      };
      this.main_site = {
        options: [],
        value: "",
        list: [],
        loading: false,
      };
      this.bank_id= "";
      this.bankList= [];
      this.site_id = "";
      this.siteList = [];
      this.dialog.centerDialogVisible = false;
      this.$emit("upFormData"); //触发父组件upFormData函数
      this.$refs["form"].resetFields();
    },
    statusBtn(bool) {
      if (bool) {
        this.show = true;
        this.formData.online = "";
        this.site_id = "";
        this.formData.bank_province = "";
        this.formData.province_code = "";
      } else {
        this.show = false;
        this.formData.online = "";
        this.site_id = "";
        this.formData.bank_province = "";
        this.formData.province_code = "";
      }
    },
    main_bankList(key = "") {
      let data = {
        key,
      };
      // 获取银行
      selectBank(data).then((res) => {
        if (res.code == 0) {
          this.bankList = res.data;
          this.main_bank.options = res.data.map((item) => {
            return {
              value: `${item.id}`,
              label: `${item.name}`,
            };
          });
        }
      });
    },
    // 获取省份
    main_siteList(key = "") {
      let data = {
        key,
      };

      selectBankProvince(data).then((res) => {
        if (res.code == 0) {
          this.siteList = res.data;
          this.main_site.options = res.data.map((item) => {
            return {
              value: `${item.id}`,
              label: `${item.name}`,
            };
          });
        }
      });
    },

    getBank() {
      this.formData.way = false;
      this.formData.online = "";
      this.show = false;
      this.site_id = "";
      this.formData.bank_province = "";
      this.formData.province_code = "";
      let bankCenter = this.bankList.filter((res) => {
        return res.id == this.bank_id;
      });
      this.formData.bank_name = bankCenter[0].name;
      if (bankCenter[0].online == 1) {
        this.onlineCenter = bankCenter[0].config;
        this.isOnline = false;
      } else {
        this.onlineCenter = [];
        this.isOnline = true;
      }
      console.log(this.isOnline,8989)
    },
    //获取所属省份
    getSite() {
      let siteCenter = this.siteList.filter((res) => {
        return res.id == this.site_id;
      });
      this.formData.bank_province = siteCenter[0].name;
      this.formData.province_code = siteCenter[0].code;
    },
   //搜索银行
    remoteMethods(query) {
      if (query !== "") {
        this.main_bankList(query);
      } else {
        this.main_bank.options = [];
      }
    },

    //搜索省份
    remoteSiteMethods(query) {
      if (query !== "") {
        this.main_siteList(query);
      } else {
        this.main_site.options = [];
      }
    },
    //提交
    confirm(form) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = {
            bank_name: this.formData.bank_name,
            open_bank: this.formData.open_bank,
            account: this.formData.account,
            account_name: this.formData.account_name,
            area_name: this.formData.area_name,
          };
          if (this.dialog.dialogType == "edit") {
            data.id = this.dialog.id;
            editBankInfo(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: res.message || res.msg,
                  type: "success",
                });
                this.$emit("upData");
                this.hideDialog();
              } else {
                this.$message({
                  message: res.message || res.msg,
                  type: "error",
                });
              }
            });
          } else {
            data.online_or = this.formData.way ? 1 : 0;
            data.mark = this.formData.online;
            data.bank_province = this.formData.bank_province;
            data.bank_province_code = this.formData.province_code;
            if (data.online_or == 1) {
              if (!data.mark) {
                this.$message({
                  message: "请选择银行",
                  type: "info",
                });
                return;
              }
            }
            addBankInfo(data)
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    message: res.message || res.msg,
                    type: "success",
                  });
                  this.$emit("upData");
                  this.hideDialog();
                } else {
                  this.$message({
                    message: res.message || res.msg,
                    type: "error",
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //取消
    cancel() {
      this.hideDialog();
    },
  },
};
</script>
<style scoped>
.radioList {
  border: 1px solid #dcdfe6;
  min-height: 40px;
  border-radius: 4px;
}
.el-radio-group {
  margin-left: 10px;
}
</style>
